<template>
    <div>
        <ul class="swiper swiper-container" :class="[wrapclass]" :id="id">
            <div class="swiper-wrapper">
                <slot></slot>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" :class="[prevclass]" @click="handlePrev" v-show="page>0"></div>
            <div class="swiper-button-next" :class="[nextclass]" @click="handleNext" v-show="showPrev"></div>
        </ul>
    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import Swiper from "swiper"
export default {
    data(){
        return {
          showPrev:false,
          page:0,
          isCenter:false,
          swp:null
        }
    },
    props:['slides','wrapclass','prevclass','nextclass','data','betn','id','isgamevideo'],
    mounted(){
    },
    destroyed(){
      if(this.swp)
        this.swp.destroy()
    },
    methods:{
        init(){
          let that=this;
          this.swp=new Swiper('#'+this.id, {
              navigation:{
                prevEl: '.'+this.prevclass,
                nextEl: '.'+this.nextclass
              },
              direction: 'horizontal', // 垂直切换选项
              //mousewheel: true, //滚轮
              autoplay:false,
              freeMode:true,
              spaceBetween:this.betn?this.betn:20,
              slidesPerView:'auto',
              resizeObserver:true,
              loop:false,
              on:{
                slideChange(){
                  that.page=this.activeIndex;
                },
                resize(){
                  let total=this.slides.length;
                  if(total==0)return;
                  let clientTotalW=(total*this.slides[0].clientWidth+(total-1)*that.betn);
                  that.showPrev=clientTotalW>this.$el[0].clientWidth;
                  
                  if(that.isgamevideo){
                    let pageCW=document.querySelector('.game-page').offsetWidth;
                    // 游戏详情视频少于4个居中
                    if(pageCW>clientTotalW){
                      let w=document.body.clientWidth;
                      if(that.$route.name=='game')
                        w=this.$el[0].clientWidth;
                      this.$el[0].style.transform='translateX('+((w-(total*576) - ((total-1) * that.betn))/2)+'px)';
                      this.$el[0].style.overflow='visible';
                    }
                  }
                  this.update();
                },
                init(){
                  let total=this.slides.length;
                  if(total==0)return;
                  let clientTotalW=(total*this.slides[0].clientWidth+(total-1)*that.betn);
                  that.showPrev=clientTotalW>this.$el[0].clientWidth;
                  if(that.isgamevideo){
                    let pageCW=document.querySelector('.game-page').offsetWidth;
                    // 游戏详情视频少于4个居中
                    if(pageCW>clientTotalW){
                      let w=document.body.clientWidth;
                      if(that.$route.name=='game')
                        w=this.$el[0].clientWidth;
                      this.$el[0].style.transform='translateX('+((w-(total*576) - ((total-1) * that.betn))/2)+'px)';
                      this.$el[0].style.overflow='visible';
                    }
                  }
                }
              }
          })
        },
        handlePrev(){
            //this.swiper.slidePrev()
        },
        handleNext(){
            //this.swiper.slideNext()
        }
    }
}
</script>
<style scoped lang="less">
.nav-cates{
  list-style: none;
  font-size:16px;
  display: flex;
  align-items: center;
  // padding-left:30px;
  padding-right:80px;
  li{
    line-height:44px;
    border-radius:44px;
    text-align: center;
    transition:.2s all linear;
    // min-width:100px;
    width:auto !important;
    // background:#1D1D1F;
    display:block !important;
    // margin-right:20px;
    color:#6A6976;
    a{
      display: inline-block;
      width:100%;
      padding:0px 26px;
      white-space: nowrap;
      &:active{
        color:#fff;
      }
    }
    &:hover{
      background:#323232;
      color:#fff;
    }
  }
}
.cate-page-prev{
  background:url('../assets/pro/right_label_arrow.svg') no-repeat;
  width:80px;
  height:46px;
  transform: rotate(180deg);
  z-index:1;
  left:0px !important;
  &:after{
    display:none;
  }
  &:hover{
    background:url('../assets/pro/right_label_arrow.svg') no-repeat;
    opacity:.6 !important;
  }
}
.cate-page-next{
  background:url('../assets/pro/right_label_arrow.svg') no-repeat;
  width:80px;
  height:46px;
  z-index:1;
  right:0px;
  &:after{
    display:none;
  }
  &:hover{
    background:url('../assets/pro/right_label_arrow.svg') no-repeat;
    opacity:.6 !important;
  }
}

.gmcate-page-prev-msize{
  background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  background-size:50px 50px;
  background-position:center;
  width:80px;
  height:80px;
  transform: rotate(180deg);
  z-index:1;
  left: 0px !important;
  top: 32px;
  border-radius:8px;
  transition:.2s all linear;
  opacity:.9;
  &:after{
    display:none;
  }
  &:hover{
    opacity:1;
    //background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    // opacity:.6 !important;
    //background-size:cover;
  }
}
.gmcate-page-next-msize{
  background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  background-size:50px 50px;
  background-position:center;
  width:80px;
  height:80px;
  z-index:1;
  border-radius:8px;
  right:0px;
  top: 32px;
  transition:.2s all linear;
  opacity:.9;
  &:after{
    display:none;
  }
  &:hover{
    opacity:1;
    // background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    // background-size:cover;
    // opacity:.6 !important;
  }
}

.dxvd-page-prev{
  background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  // background-size:50px 50px;
  background-position:center;
  width:80px;
  height:80px;
  transform: rotate(180deg);
  z-index:1;
  left: 0px !important;
  top:calc((324px - 80px) / 2);
  border-radius:8px;
  transition:.2s all linear;
  opacity:.9;
  &:hover{
    opacity:1;
    // background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    // opacity:.6 !important;
    // background-size:cover;
  }
  &:after{
    display:none;
  }
}
.dxvd-page-next{
  background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  // background-size:50px 50px;
  background-position:center;
  width:80px;
  height:80px;
  z-index:1;
  border-radius:8px;
  right:0px;
  top:calc((324px - 80px) / 2);
  transition:.2s all linear;
  opacity:.9;
  &:hover{
    opacity:1;
  }
  &:after{
    display:none;
  }
}


.gm-page-prev-msize{
  background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  background-size:cover;
  width:80px;
  height:80px;
  transform: rotate(180deg);
  z-index:1;
  left:-10px !important;
  top:40%;
  border-radius:8px;
  &:after{
    display:none;
  }
  &:hover{
    background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    // opacity:.6 !important;
    background-size:cover;
  }
}
.gm-page-next-msize{
  background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  background-size:cover;
  width:80px;
  height:80px;
  z-index:1;
  border-radius:8px;
  right:0px !important;
  top:40%;
  &:after{
    display:none;
  }
  &:hover{
    background:url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
  background-size:cover;
    // opacity:.6 !important;
  }
}


























</style>